<template>
  <div class="container">
    <h1>图片视频下载插件</h1>
    <div class="switch-container">
      <el-switch v-model="isEnabled" active-color="#10b981" inactive-color="#cccccc" @change="togglePlugin" />
      <span class="status-text">{{ isEnabled ? '已启用' : '已禁用' }}</span>
    </div>

    <!-- 添加宽高阈值设置 -->
    <div class="threshold-settings">
      <h3>下载尺寸阈值</h3>
      <div class="input-group">
        <label>最小宽度:</label>
        <input type="number" v-model.number="widthThreshold" placeholder="像素">
      </div>
      <div class="input-group">
        <label>最小高度:</label>
        <input type="number" v-model.number="heightThreshold" placeholder="像素">
      </div>
      <button class="confirm-btn" @click="saveThresholds">确定</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElSwitch } from 'element-plus'

const isEnabled = ref(false)
const widthThreshold = ref(150)
const heightThreshold = ref(150)

// 从本地存储加载插件状态和阈值设置
onMounted(() => {
  chrome.storage.local.get(['pluginEnabled', 'widthThreshold', 'heightThreshold'], (result) => {
    isEnabled.value = result.pluginEnabled || false
    widthThreshold.value = result.widthThreshold || 150
    heightThreshold.value = result.heightThreshold || 150
  })
})

// 切换插件状态
const togglePlugin = () => {
  chrome.storage.local.set({ pluginEnabled: isEnabled.value }, () => {
    sendMessageToContentScript({ action: 'togglePlugin', enabled: isEnabled.value })
  })
}

// 保存阈值设置
const saveThresholds = () => {
  console.log(widthThreshold.value);
  console.log(heightThreshold.value);
  if (!widthThreshold.value && !heightThreshold.value) {
    ElMessage.error('请输入阈值')
    return
  }

  if (widthThreshold.value < 30 || heightThreshold.value < 30) {
    ElMessage.error('请输入大于30的阈值')
    return
  }
  const width = Math.max(0, widthThreshold.value || 150)
  const height = Math.max(0, heightThreshold.value || 150)

  chrome.storage.local.set({
    widthThreshold: width,
    heightThreshold: height
  }, () => {
    sendMessageToContentScript({
      action: 'updateThresholds',
      width: width,
      height: height
    })
  })
}

// 向content-script发送消息
const sendMessageToContentScript = (message) => {
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    console.log('已经从app页面发出信息', tabs)
    if (tabs[0]) {
      chrome.tabs.sendMessage(tabs[0].id, message)
    }
  })
}
</script>

<style scoped>
.container {
  width: 320px;
  padding: 16px;
  text-align: center;
}

h1 {
  font-size: 18px;
  margin-bottom: 16px;
}

.switch-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
}

.status-text {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  padding: 4px 8px;
  border-radius: 4px;
  background-color: #f5f5f5;
}

.el-switch {
  margin-bottom: 0;
  /* 移除底部边距 */
}

.threshold-settings {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.input-group {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.input-group label {
  width: 80px;
  text-align: right;
  margin-right: 10px;
}

.input-group input {
  width: 120px;
  padding: 6px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.confirm-btn {
  width: 210px;
  padding: 8px;
  background-color: #10b981;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
}

.confirm-btn:hover {
  background-color: #059669;
}
</style>